<template>
  <div class="icons-container">
    <el-row class="topRow">
      <el-button type="primary" @click="addData">新增明细表单</el-button>
    </el-row>
    <el-tabs type="border-card">
      <!-- <el-tab-pane label="支出预算明细表" align="center"> -->
        <div class="grid">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="number"
              label="序号"
              width="60"
              align="center">
            </el-table-column>
            <el-table-column label="信息" align="center">
              <el-table-column
                prop="name"
                label="部门经济分类"
                width="120"
                align="center">
              </el-table-column>
                <el-table-column
                  prop="province"
                  label="政府经济分类"
                  width="120"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="合计"
                  width="100"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="loan"
                  label="公共预算贷款"
                  width="120"
                  align="center">
                </el-table-column>
                <el-table-column label="专项资金项目" align="center">
                <el-table-column
                  prop="zip"
                  label="专项资金项目（省级）"
                  width="170"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="专项资金项目（中央）"
                  width="170"
                  align="center">
                </el-table-column>
                <el-table-column label="政府基金性拨款" align="center">
                <el-table-column
                  prop="zip"
                  label="政府性基金拨款（省级）"
                  width="180"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="政府性基金拨款（中央）"
                  width="180"
                  align="center">
                </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="180"
              align="center">
              <template slot-scope="scope">
              <el-button @click="updateData(scope.row)" type="primary" size="small">编辑</el-button>
              <el-button type="primary" size="small">删除</el-button>
            </template>
           </el-table-column>
          </el-table>
        </div>
      <!-- </el-tab-pane> -->

      <!-- <el-tab-pane label="收入预算明细表" align="center">
        <div class="grid">
          <el-table
            :data="tableData"
            style="width: 100%">
            <el-table-column
              prop="number"
              label="序号"
              width="60"
              align="center">
            </el-table-column>
            <el-table-column label="信息" align="center">
              <el-table-column
                prop="name"
                label="部门经济分类"
                width="120"
                align="center">
              </el-table-column>
                <el-table-column
                  prop="province"
                  label="政府经济分类"
                  width="120"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="city"
                  label="合计"
                  width="100"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="公共预算贷款"
                  width="120"
                  align="center">
                </el-table-column>
                <el-table-column label="专项资金项目" align="center">
                <el-table-column
                  prop="zip"
                  label="专项资金项目（省级）"
                  width="170"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="专项资金项目（中央）"
                  width="170"
                  align="center">
                </el-table-column>
                <el-table-column label="政府基金性拨款" align="center">
                <el-table-column
                  prop="zip"
                  label="政府性基金拨款（省级）"
                  width="180"
                  align="center">
                </el-table-column>
                <el-table-column
                  prop="zip"
                  label="政府性基金拨款（中央）"
                  width="180"
                  align="center">
                </el-table-column>
                </el-table-column>
              </el-table-column>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane> -->
    </el-tabs>
   <el-dialog title="新增明细表单" :visible.sync="dialogFormVisible">
   <el-form :model="form">
      <el-form-item label="项目名称" :label-width="formLabelWidth">
      <el-select v-model="form.project_name" placeholder="请选择活动区域">
        <el-option label="项目1" value=""></el-option>
        <el-option label="项目2" value=""></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="功能分类" :label-width="formLabelWidth">
      <el-select v-model="form.functional_category" placeholder="请选择活动区域">
        <el-option label="功能1" value=""></el-option>
        <el-option label="功能2" value=""></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="部门经济分类" :label-width="formLabelWidth">
      <el-select v-model="form.financial_category" placeholder="请选择活动区域">
        <el-option label="经济1" value=""></el-option>
        <el-option label="经济2" value=""></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="公共预算贷款" :label-width="formLabelWidth">
      <el-input v-model="form.loan" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="专项资金项目（省级）" :label-width="formLabelWidth">
      <el-input v-model="form.special_province" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="专项资金项目（中央）" :label-width="formLabelWidth">
      <el-input v-model="form.special_center" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="政府性基金拨款（省级）" :label-width="formLabelWidth">
      <el-input v-model="form.fund_province" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="政府性基金拨款（中央）" :label-width="formLabelWidth">
      <el-input v-model="form.fund_center" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click="dialogFormVisible = false">取 消</el-button>
    <el-button type="primary" @click="submit = false">确 定</el-button>
  </div>
  </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Icons",
    data() {
      return {
      loading: false,
      // 表格组件 列表数据对象
      tableData: [],
      planList: [],
      editRowJson: '',
      dialogFormVisible:false,
      form: {
        name: '',
        region: '',
        date1: '',
        date2: '',
        delivery: false,
        type: [],
        resource: '',
        desc: ''
      },
      formLabelWidth: '120px'
      }      
    },
    created() {
    this.initData();
  },
    methods: {
        handleClose(done) {
        // this.$confirm('确认关闭？')
        //   .then(_ => {
        //     done();
        //   })
        //   .catch(_ => {});
      },
        addData(){
            this.form = {};
            this.dialogFormVisible = true;
            this.dialogTitle = "addData";
        },
        updateData(row){
            this.dialogFormVisible = true;
            this.dialogTitle = "updateData";
            this.form = row;
        },
        submit(){
            this.dialogFormVisible = false;
            if (this.dialogTitle == "addData") {
                console.log(this.form);
                alert("向服务器发送添加的请求！");
            } else {
                console.log(this.form);
                alert("向服务器发送修改的请求！");
            }
        },
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      },
          /**
     * @method initData
     * @description 初始化数据
     */
    initData() {
      this.getList();
    },
    /**
     * @description 获取列表
     * @method getList
     */
    getList() {
      const list = [
        {
          number: '1',
          id: '123',
          name: '学校1',
        },
        {
          number: '2',
          id: '456',
          name: '学校2',
        }
      ];
      //   拿到列表数据
      this.tableData = list;
      this.planList = (list[0] && list[0]['planList']) || [];
    },
    /**
     * @method handleData
     * @description 编辑或者保存数据
     */

    /**
     * @method cancelEdit
     * @description 退出编辑
     */
   }
 };
</script>

<style lang="scss" scoped>
.icons-container{
  margin: 10px 20px 0;
}
.topRow {
  margin: 5px 10px 0;

}
</style>
